@import "variables.less";    // 样式变量


nav {
    // 用户容器
    .user {
        .user-menu {
            background: @navColor;
            border: 1px solid @navColor;
            ul {
                li {
                    a {
                        color: @themeColor;
                        &:hover {
                            background: @themeColor;
                            color: @navColor;
                        }
                    }
                }
            }
            &:before {
                border-bottom: 8px solid #ffffff;
            }
        }
    }
}

.user {
    .user-container {
        background: #f17370;
        .user-news {
            padding-top: 20px;
            text-align: center;
            img {
                width: 68px;
                height: 68px;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
                margin-bottom: 10px;
                border: 2px solid #fff;
            }
            .user-name {
                font-size: 14px;
                color: #fff;
                font-weight: bold;
                letter-spacing: 1px;
            }
        }
        .tab {
            text-align: center;
            margin-top: 36px;
            ul {
                margin: 0;
                padding: 0;
                display: inline-block;
                clear: both;
                overflow: hidden;
                margin: 0 auto;
                li {
                    float: left;
                    margin: 0px 60px;
                    cursor: pointer;
                    // color: #fff;
                    padding: 2px 16px;
                }
                li.active {
                    border: 1px solid #fff;
                    border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    position: relative;
                    color: #fff;
                }
                // li.active:after {
                //     content: "";
                //     position: absolute;
                //     width: 0;
                //     height: 0;
                //     border-left: 6px solid transparent;
                //     border-right: 6px solid transparent;
                //     border-top: 12px solid red;
                // }
            }
        }
    }
    .main {
        min-height: 400px;
        margin: 0px auto 2px auto;
        background: #fff;
    }
    .list {
        padding-top: 30px;
    }
    .item {
        -webkit-box-shadow:0 0 10px rgba(170, 179, 179, 0.5);  
        -moz-box-shadow:0 0 10px rgba(170, 179, 179, 0.5);  
        box-shadow:0 0 10px rgba(170, 179, 179, 0.5);  
    }
    .usernews-form {
        width: 360px;
        margin: 0 auto;
        padding: 40px 0px;
        .form-group {
            margin-bottom: 30px;
            position: relative;
            label {
                display: inline-block;
                width: 14%;
                letter-spacing: 2px;
                font-weight: bold;
                font-size: 13px;
            }
            .user-headImg {
                width: 60px;
                height: 60px;
                margin: 0 auto;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                    -webkit-border-radius: 100%;
                    -moz-border-radius: 100%;
                }
            }
            .group-right {
                width: 84%;
                height: 100%;
                display: inline-block;
            }
            input[type="text"],input[type="password"] {
                width: 100%;
                height: 100%;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border: none;
                border: 1px solid #ddd;
                text-indent: 10px;
            }
            input[type="file"] {
                width: 80px;
                height: 24px;
                margin-top: 20px;
                position: relative;
                outline: none;
                &:after {
                    content: "上传头像";
                    display: inline-block;
                    position: absolute;
                    width: 80px;
                    height: 24px;
                    line-height: 24px;
                    text-align: center;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: #fff;
                    border-radius: 6px;
                    -webkit-border-radius: 6px;
                    -moz-border-radius: 6px;
                    border: 1px solid #ddd;
                    cursor: pointer;
                    letter-spacing: 1px;
                    font-size: 13px;
                    font-weight: bold;
                }
            }
            input[type="submit"] {
                    width: 120px;
                    height: 30px;
                    text-align: center;
                    background: #f17370;
                    border-radius: 6px;
                    -webkit-border-radius: 6px;
                    -moz-border-radius: 6px;
                    cursor: pointer;
                    letter-spacing: 1px;
                    font-size: 13px;
                    color: #fff;
                    border: none;               
                &:hover {
                    background: #FF726F;
                }
            }
        }
        .input-group {
            height: 26px;
            line-height: 26px;
        }
        .file-group,.btn-group {
            text-align: center;
        }
        .error-message {
          top: -1px;
        }
        label.error {
          width: auto !important;
        }
    }

    .notice {
        clear: both;
        overflow: hidden;
        margin-top: 20px;
        .notice-list {
            float: left;
            display: inline-block;
            width: 30%;
            height: 400px;
            border: 1px solid red;
            ul {
                padding: 0;
                margin: 0;
                li {
                    height: 46px;
                    clear: both;
                    overflow: hidden;
                    margin: 20px 20px;
                    img {
                        float: left;
                        width: 46px;
                        height: 100%;
                        border-radius: 100%;
                        -webkit-border-radius: 100%;
                        -moz-border-radius: 100%;
                        margin-right: 10px;
                    } 
                    .notice-news {
                        float: left;
                        .title {
                            padding-bottom: 10px;
                            span.name {
                                margin-right: 20px; 
                            }
                        }
                        p {
                            margin: 0;
                        }
                    }                  
                }
            }
        }
        .notice-content {
            float: right;
            display: inline-block;
            width: 50%;
            height: 400px;
            border: 1px solid red;
            .user-container {
                width: 120px;
                height: 90px;
                margin: 30px auto 20px auto;
                text-align: center;
                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 100%;
                    -webkit-border-radius: 100%;
                    -moz-border-radius: 100%;
                }
                p {
                    line-height: 30px;
                }
            }
            .notice-txt {
                padding: 0px 30px;
                line-height: 24px;
                text-indent: 20px;
            }
        }
    }
}
